/* --------- el-dialog reset --------- */
.el-dialog__wrapper {
    &.no-head .el-dialog .el-dialog__header {
        display: none;
    }

    &.no-headtitle .el-dialog {
        .el-dialog__header {
            height: 40px;
            padding: 0 20px;
            line-height: 40px;
            border: none;

            .el-dialog__headerbtn {
                top: 8px;
            }
        }
    }

    .el-dialog {
        width: 50%;
        min-width: 280px;
        max-width: 500px;
        border-radius: 4px;

        .el-dialog__header {
            height: 50px;
            padding: 12px 15px;
            border: 1px solid #f2f2f2;
            border-radius: 4px 4px 0 0;
            overflow: hidden;

            .el-dialog__title {
                color: #666;
                font-size: 15px;
                font-weight: 700;
                line-height: 24px;
                letter-spacing: 1px;
            }

            .el-dialog__headerbtn {
                top: 13px;
                line-height: 24px;
            }
        }

        .el-dialog__body {
            max-height: 600px;
            padding: 20px 30px;
            color: #333;
            overflow: auto;
            box-sizing: border-box;
        }

        .el-dialog__footer {
            padding: 10px 15px 20px;
            border-top: none;
            // border-top: 1px solid #F0F0F0;

            .btn {
                min-width: 100px;
            }

            .s-center {
                text-align: center;
            }
        }

        .dialog-btn {
            min-width: 100px;
        }

        /* 弹框内表单样式 */
        .l-form {
            padding-top: 0;

            & + .dialog__footer {
                margin-bottom: -10px;
            }
        }
    }

    &.s-lg .el-dialog {
        width: 80%;
        max-width: 80%;
    }

    &.s-sm .el-dialog {
        max-width: 300px
    }
}

/* --------- x-dialog  --------- */
.x-dialog.el-dialog__wrapper {
    // 是否展示头部
    &.has-header .el-dialog .el-dialog__header {
        display: none;
    }

    // 无标题
    &.no-headtitle .el-dialog .el-dialog__header {
        height: 40px;
        padding: 0 24px;
        line-height: 40px;
        border: none;

        .el-dialog__headerbtn {
            top: 0;
        }
    }

    // body 不限高度
    &.no-max-height {
        .el-dialog .el-dialog__body {
            max-height: none;
        }
    }

    .el-dialog {
        .el-dialog__header {
            height: 50px;
            padding: 12px 16px;
            border: 1px solid $--border-color;
            border-radius: 4px 4px 0 0;
            overflow: hidden;

            .el-dialog__title {
                display: block;
                padding-right: 16px;
                color: $--cont-color;
                font-size: 15px;
                font-weight: 700;
                line-height: 24px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .el-dialog__headerbtn {
                top: 7px;
                right: 0;
                padding: 8px 20px;
                line-height: 24px;
            }
        }

        .el-dialog__body {
            max-height: 84vh;
            overflow: auto;
            padding: 16px;

            .x-form {
                padding-top: 0;
            }
        }

        .el-dialog__footer {
            padding: 0;
            border-top: 1px solid $--border-color;
        }


    }

    .x-dialog__title {
        padding-right: 16px;
        color: $--cont-color;
        font-size: 15px;
        font-weight: 600;
        line-height: 24px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        .title__icon {
            height: 20px;
            margin-right: 6px;
            vertical-align: sub;
        }
        .title__tips {
            padding: 0 6px;
            color: $--type-danger;
            font-size: 12px;
        }
    }

    .x-dialog__body {
        color: $--cont-color;
    }

    .x-dialog__footer {
        padding: 12px 18px;

        .o-btn {
            min-width: 80px;
            margin-left: 8px;
            // font-size: 14px;
            letter-spacing: 1px;

            &.o-btn--cancel {
                color: $--cont-color;
                border: 1px solid rgba($--type-info, .3);
                background: #fff;
                &:hover {
                    color: $--type-primary-dark;
                    border-color: $--type-primary-dark;
                    background: #fff;
                }
            }
            &.o-btn--submit {
                min-width: 120px;
            }
        }

    }

    &.s-md .el-dialog {
        width: 50%;
    }
    &.s-lg .el-dialog {
        width: 80%;
    }
}

/* --------- l-confirm --------- */
.l-confirm {
    width: 320px;

    .el-message-box__header {
        padding: 15px 15px 10px;

        .el-message-box__title {
            color: #666;
            font-size: 14px;
        }
    }

    .el-message-box__content {
        padding: 15px 20px;
        color: #333;
    }

    .el-button--small,
    .el-button--small.is-round {
        padding: 7px 15px;
    }
}


/* ------------------ chatroom popup ------------------ */
.dialog-popup {
    /* --------- 弹框--内容大标题(+按钮) --------- */
    .popup__titlebar {
        @include flex;
        @include flex-row-between;
        margin: 0 0 6px;
        color: $--cont-color;
        font-size: 14px;

        .-titlebar__left {
            @include flex-1;
            color: $--main-color;

        }
        .-titlebar__right {
            margin-left: 12px;
            text-align: right;

            .o-btn {
                margin-left: 6px;
            }
        }
    }


    /* --------- 弹框--底部提交按钮 --------- */
    .popup__footer {
        @include flex;
        @include flex-row-r;

        margin-top: 24px;

        .s-row-center {
            @include flex-row-c;
        }
        .o-btn {
            min-width: 90px;
        }
        .o-btn--main {
            @include flex-1;
        }
    }


    /* --------- 必填标记 -- * --------- */
    .is-require {
        display: inline-block;
        margin-right: 2px;
        color: $--type-error;
        font-size: 14px;
    }


    /* --------- 提示文字 --------- */
    .o-tips {
        padding: 8px;
        color: $--light-color;
        font-size: 12px;
        /* 间距 */
        &.s-margin-t {
            margin-top: 6px;
        }
        &.s-margin-b {
            margin-bottom: 6px;
        }
        /* 居中对齐 */
        &.s-align-c {
            text-align: center;
        }
        /* 字体颜色 */
        &.c-danger {
            color: $--type-danger;
        }
        &.c-warning {
            color: $--type-warning;
        }
        /* 背景色 */
        &.has-bg {
            background: rgba($--light-color, .5);

            &.c-danger {
                background: rgab($--type-danger, .5);
            }
            &.c-warning {
                background: rgab($--type-warning, .5);
            }
        }
    }
}

/* --------- flex 框架 --------- */
.popup__frame {
    @include flex;

    /* 左侧 */
    .frame__left {
        @include flex-1;
        padding: 0 12px 12px;
        border-right: 1px solid $--border-color;

        &.no-border {
            border-right: 0;
        }
    }
    /* 右侧 */
    .frame__right {
        @include flex-1;
        padding: 0 12px 12px;
    }

    /* 内容占位 */
    .s-flex-2 {
        @include flex-2;
    }

    /* 内容标题 */
    .frame__title {
        margin-bottom: 12px;
        color: $--main-color;
        font-size: 16px;
        font-weight: 600;
        line-height: 40px;
        text-align: center;
    }
}


/* ------------------ 用药详情 ------------------ */
.drug-detail-dialog {
    .detail-info {
        .detail-info__item {
            margin: 12px 0;
        }
    }
}


/* --------- 开处方药 --------- */
.popup-drug__create {

    /* 搜索栏 */
    .drug__search {
        @include flex;
        .search__main {
            @include flex-1;
            .main__item {
                width: 33%;
                margin: 0 12px 2px 0;
            }
        }
        .search__handle {
            margin-left: 6px;
            text-align: right;
            .o-btn {
                margin-left: 6px;
            }
        }
    }

    /* --------- 开药弹框 --------- */
    .drug__prescribing {
        height: 46vh;

        .prescribing__tips {
            margin: 0 6px;
            color: $--type-danger;
        }
    }

    /* ------ 开处方 -- drug ------ */
    .drug-search-bar {
        @include flex;
        .search__main {
            @include flex-1;
            .search__item {
                width: 30%;
                margin: 0 1% 2px 0;
            }
        }
        .search__handle {
            margin-left: 6px;
            text-align: right;
            .o-btn {
                margin-left: 6px;
            }
        }
    }
    .drug-tips {
        margin: 6px 0;
        padding: 4px;
        color: $--type-danger;
        font-size: 12px;
        text-align: center;
        background: rgba($--type-danger-light, .5);
    }
    .drug-create-frame {
        @include flex-v;
        color: $--cont-color;
        font-size: 14px;
        .x-headline {
            margin: 0 0 12px;
        }
        .create__diagnosis {
            height: 100px;
            padding: 6px 12px;
            margin-bottom: 12px;
            border: 1px solid $--border-color;
        }
        .create__rp {
            @include flex-1;
            @include flex-v;
            min-height: 240px;
            margin-bottom: 12px;
            border: 1px solid $--border-color;

            .create__rp-inner {
                @include flex-1;
                @include scrollbar;
                max-height: 44vh;
                padding: 6px 12px 0;
                overflow-y: auto;
                .rp__item {
                    margin-bottom: 12px;
                    line-height: 1.3;
                    .item__title {
                        @include flex;
                        .title__name {
                            @include flex-1;
                            color: $--main-color;
                            font-size: 14px;
                            font-weight: 600;
                        }
                        .title__icon {
                            padding-left: 12px;
                            font-size: 16px;
                        }
                    }
                    .item__info {
                        margin-top: 4px;
                        color: $--cont-color;
                        font-size: 13px;
                        & > span {
                            padding-right: 6px;
                        }
                    }
                    .item__from {
                        margin-top: 4px;
                        color: $--tips-color;
                        font-size: 12px;
                    }
                }
            }

            .create__rp-handle {
                padding: 6px 12px;
                margin-top: 0;
            }
        }

        .create__opened {
            @include scrollbar;
            height: 100px;
            padding: 6px 12px;
            border: 1px solid $--border-color;
            overflow-y: auto;

            .opened__row {
                @include flex;
                @include flex-col-c;
                @include flex-row-between;

                margin-bottom: 4px;

                .opened__label {
                    @include flex-1;
                    cursor: default;
                }
                .opened__handle {
                    text-align: right;

                    .o-link {
                        margin-left: 6px;
                    }
                }
            }
        }
    }
    .drug-template {
        margin-bottom: 12px;
        .template__row {
            margin-bottom: 6px;
        }
    }
}

/* --------- 查看药品详情 --------- */
.popup-drug__detail {
    .detail__head {
        @include flex;
        @include flex-col-c;
        margin-bottom: 10px;
        .head__avatar {
            width: 140px;
            height: 140px;
            margin-right: 12px;
        }
        .head__info {
            @include flex-1;
            .info__title {
                margin-bottom: 24px;
                color: $--type-primary-dark;
                font-size: 24px;
                font-weight: 600;
            }
            .info__row {
                margin-top: 12px;
                color: $--main-color;
                font-size: 18px;
            }
        }
    }

    .detail__body {
        font-size: 14px;
    }
    .detail__box {
        @include flex;
        @include flex-wrap;
        color: $--tips-color;

        .box__item {
            width: 50%;
            padding: 6px;
        }
    }
    .detail__other {
        min-height: 160px;
        padding: 6px 12px;
        margin-top: 12px;
        color: $--cont-color;
        border: 1px solid $--border-color;
    }
}